<template>
  <div class="header">
    <div class="header1">
      <!-- Logo 部分保持不变 -->
     <!-- Logo 部分 -->
     <div class="logo-container" @click="toPage('index')">
        <div class="logo-wrapper">
          <svg class="logo-svg" viewBox="0 0 200 50">
            <g class="logo-icon">
              <!-- 地球图标 -->
              <circle cx="25" cy="25" r="20" class="globe" />
              <path class="route-line" d="M15,25 Q25,15 35,25" />
              <circle cx="15" cy="25" r="2" class="route-point start-point" />
              <circle cx="35" cy="25" r="2" class="route-point end-point" />
              <!-- 装饰性元素 -->
              <path class="decoration" d="M25,5 Q35,25 25,45" fill="none" stroke="#fff" />
            </g>
            <!-- Logo 文字 -->
            <text x="60" y="32" class="logo-text primary">智慧</text>
            <text x="100" y="32" class="logo-text secondary">旅游</text>
          </svg>
        </div>
      </div>

      <!-- 修复菜单部分 -->
      <div class="header4">
        <div class="menu-list">
          <div 
            v-for="(item, index) in menuItems" 
            :key="index"
            @click="toPage(item.route)"
            class="menu-item"
            :class="{'menu_item': isActive(item.route)}"
          >
            <i :class="item.icon"></i>
            <span class="menu-text">{{ item.name }}</span>
          </div>
        </div>
      </div>

      <!-- 用户部分保持不变 -->
      <div class="header5">
        <img @click="toCenter" class="avatar" src="../assets/image/logo.png">
        <div class="header6" @click="loginOut">
          <i class="fas fa-sign-out-alt"></i>
          退出
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { name: '系统主页', route: 'index', icon: 'fas fa-home' },
        { name: '景点信息', route: 'attractions', icon: 'fas fa-landmark' },
        { name: '旅游线路', route: 'line', icon: 'fas fa-route' },
        { name: '景区酒店', route: 'hotel', icon: 'fas fa-hotel' },
        
        { name: '车票预订', route: 'ticket', icon: 'fas fa-ticket-alt' },

        { name: '特产商城', route: 'product', icon: 'fas fa-shopping-bag' },

        { name: '旅游资讯', route: 'forum', icon: 'fas fa-newspaper' },
        { name: '我的收藏', route: 'favor', icon: 'fas fa-heart' },
        { name: '我的预定', route: 'order', icon: 'fas fa-calendar-check' },
        { name: '后台管理', route: 'manage', icon: 'fas fa-cogs' }
      ]
    }
  },
  methods: {
    isActive(route) {
      if (route === 'index') {
        return this.$route.path === '/'
      }
      return this.$route.path === `/${route}`
    },
    toCenter() {
      this.$router.push("/center")
    },
    toPage(name) {
      if (name === "index") {
        this.$router.push("/")
      } else if (name === "manage") {
        window.open("http://localhost:3000")
      } else {
        this.$router.push(`/${name}`)
      }
    },
    loginOut() {
      this.$store.dispatch('logout').then(() => {
        window.localStorage.removeItem("user_info")
        window.localStorage.removeItem("user_token")
        this.$message({
          message: '退出成功',
          type: 'success'
        });
        setTimeout(() => {
          window.location.reload()
        }, 1000)
      })
    }
  }
}
</script>

<style scoped>
/* 保持原有样式 */
.header {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to right, #ffffff, #f8f9fa);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header1 {
  width: 80%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
}

/* 修复菜单样式 */
.header4 {
  flex: 1;
  margin: 0 0;
}

.menu-list {
  display: flex;
  justify-content: center;
  gap: 2px;
  height: 100%;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 40px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap; /* 防止文字换行 */
}

.menu-text {
  margin-left: 5px;
  font-size: 16px;
  color: #333;
}

.menu-item:hover {
  background-color: rgba(67, 129, 255, 0.1);
  transform: translateY(-2px);
}

.menu_item {
  color: #4381FF;
  background-color: rgba(67, 129, 255, 0.1);
}

.menu_item .menu-text,
.menu_item i {
  color: #4381FF;
}

/* 用户区域样式 */
.header5 {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease;
  border: 2px solid #4381FF;
}

.header6 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 20px;
  background-color: #4381FF;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* 响应式优化 */
@media (max-width: 1280px) {
  .header1 {
    width: 95%;
  }
  
  .menu-item {
    padding: 0 10px;
  }
}

@media (max-width: 1024px) {
  .menu-text {
    display: none;
  }
  
  .menu-item {
    padding: 0 12px;
  }
  
  .menu-item i {
    font-size: 18px;
  }
}
/* 添加 Logo 相关样式 */
.logo-container {
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.logo-container:hover {
  transform: translateY(-2px);
}

.logo-wrapper {
  width: 200px;
  height: 50px;
}

.logo-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.logo-icon {
  animation: float 3s ease-in-out infinite;
}

.globe {
  fill: #4381FF;
  opacity: 0.9;
}

.route-line {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: drawLine 3s ease-in-out infinite;
}

.route-point {
  fill: #fff;
  animation: pulse 2s ease-in-out infinite;
}

.start-point {
  animation-delay: 0.5s;
}

.end-point {
  animation-delay: 1s;
}

.decoration {
  stroke-width: 1;
  stroke-dasharray: 100;
  opacity: 0.5;
  animation: drawLine 4s ease-in-out infinite;
}

.logo-text {
  font-family: "微软雅黑", sans-serif;
  font-weight: bold;
  font-size: 24px;
}

.logo-text.primary {
  fill: #4381FF;
}

.logo-text.secondary {
  fill: #333;
}

/* Logo 动画 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes drawLine {
  0% { stroke-dashoffset: 100; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.8; }
}

/* 保持原有样式不变 */
...

/* 响应式调整 */
@media (max-width: 1280px) {
  .logo-wrapper {
    width: 160px;
  }
  
  .logo-text {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .logo-wrapper {
    width: 120px;
  }
  
  .logo-text {
    font-size: 18px;
  }
}
</style>